<!--
 * @Author: Bennty
 * @Date: 2024-07-15 14:36:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-14 16:36:13
 * @Description: 请填写简介
-->
<template>
    <div>
        <el-timeline v-if="props.data.length != 0">
            <el-timeline-item v-for="item in props.data" :key="item.id" :timestamp="item.createTime" placement="top">
                <el-card :class="selectedId==item.id?'follow-card follow-card-selected':'follow-card'" >
                    <template #header>
                        <div class="drop-down-menu-container">
                            <el-dropdown trigger="click">
                                <el-button icon="More"></el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="handleClickEdit(item.id)">编辑</el-dropdown-item>
                                        <el-dropdown-item @click="handleClickComment(item)">评论</el-dropdown-item>
                                        <el-dropdown-item @click="handleClickCheckComment(item)">查看评论</el-dropdown-item>
                                        <el-dropdown-item @click="handleDeleteFollowRecord(item.id)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </template>
                    <el-row>
                        <el-col class="avatar-container" :span="2">
                            <el-avatar :size="100" :src="item.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                        </el-col>
                        <el-col :span="22">
                            <h3>联系人: {{ item.createByName }}</h3>
                                <p>{{ item.createTime }}</p>
                                <p>联系方式: {{ props.contractMethod.filter((method:any)=>item.followType == method.value)[0]?.label }}</p>
                                <p>{{ item.contractMessage }}</p>
                                <p>下次联系时间: {{ item.nextContactDate }}</p>
                                <el-row :gutter="20">
                                    <el-col :span="4" v-for="(image,index) in item.imageIds.split(',')" :key="index">
                                        <el-image :src="image" fit="contain" style="width: 100%"/>
                                    </el-col>
                                </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <h2 v-else> 暂无跟进记录 </h2>
        <el-dialog v-model="commentVisible" title="新增评论" width="30%" @close="handleCloseComment">
            <el-form :model="commentFormData" ref="commentForm">
                <el-form-item>
                    <span>{{ commentedData.createTime }}</span>
                </el-form-item>
                <el-form-item label="跟进人">
                    <span>{{ commentedData.createByName }}</span>
                </el-form-item>
                <el-form-item label="跟进内容">
                    <span>{{ commentedData.contractMessage }}</span>
                </el-form-item>
                <el-form-item label="下次联系时间">
                    <span>{{ commentedData.nextContactDate }}</span>
                </el-form-item>
                <el-form-item label="评论内容" prop="comments">
                    <el-input v-model="commentFormData.comments" type="textarea" maxlength="128" show-word-limit ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitComment">确 定</el-button>
                    <el-button @click="handleCloseComment">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="checkCommentsVisible" title="查看评论" width="30%" @close="handleCloseCheckComment">
            <el-card class="comment-container" shadow="never" v-for="item in comments" :key="item.id">
                <el-row :gutter="80">
                    <el-col :span="5">
                        <el-avatar :size="100" :src="item.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                    </el-col>
                    <el-col :span="17">
                        <p class="comment comment-info">{{ `${item.createByName} 于 ${item.createTime} 评论：` }}</p>
                        <p class="comment comment-content">{{ item.comments }}</p>
                    </el-col>
                </el-row>
            </el-card>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleCloseCheckComment">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    
</template>

<script setup lang="ts">
import { deleteFollowRecordApi,addFollowCommentApi,getFollowRecordsApi } from '@/api/sj/followRecord-crm/index';
import type { FormInstance } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const props = defineProps(['data','contractMethod']);
const emits = defineEmits(['edit','submitDelete'])
const selectedId = ref<string|number>();
const commentVisible = ref(false);
const commentForm = ref<FormInstance>();
const commentedData = ref<any>();
const commentFormData = ref({
    comments: undefined
});
const comments = ref<any[]>([]);
const checkCommentsVisible = ref(false);

// const handleClickFollowRecord = (id:number|string)=>{
//     selectedId.value = id;
//     emits('select', id);
// };

const handleClickEdit = (id:string | number) => {
    emits('edit', id)
};

const handleClickComment = (row: any) => {
    commentedData.value = row;
    commentVisible.value = true;
};

const handleCloseComment = () => {
    commentVisible.value = false;
    commentForm.value?.resetFields();
};

/** 提交新增评论 */
const  handleSubmitComment = async() => {
    const submitData = {...commentFormData.value, followId: commentedData.value.id};
    const result = await addFollowCommentApi(submitData);
    if(result.code == 200){
        handleCloseComment();
    }
};

/** 查看评论 */
const handleClickCheckComment = async (item: any) => {
    const result = await getFollowRecordsApi(item.id);
    comments.value = result.data;
    checkCommentsVisible.value = true;
};

/** 关闭查看评论 */
const handleCloseCheckComment = () => {
    checkCommentsVisible.value = false;
};

/** 删除跟进 */
const handleDeleteFollowRecord = async (id: number| string) => {
    if(id){
        await proxy?.$modal.confirm('确认删除这些客户信息?');
        await deleteFollowRecordApi(id).then((result)=>{
            if(result.code == 200){
                emits('submitDelete',true);
            }
        });
    }
    
}

</script>

<style lang="scss" scoped>
::v-deep(.el-card__header){
    border-bottom: none !important;
}
.follow-card{
    .drop-down-menu-container{
        display: flex;
        flex-direction: row-reverse;
    }
    border: none;
    border:solid 1px #fff;
    .avatar-container{
        display: flex;
        align-items: center;
    }
    &:hover{
        border:solid 1px black;
    }
}
.follow-card-selected{
    border:solid 1px black;
}
.comment-container{
    margin-top: 20px;
    max-height: 20vh;
    .comment{
        font-size: 18px;
    }
    .comment-content{
        font-weight: bolder;
    }
}

.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>